@import (reference) "~weaver-mobile/dist/weaver-mobile.less";

@attendanceBlue: #61A9F5;
@greyLine: 1px solid #f7f4f4;
@divisionBgColor: #e5eaf2;
@greyColor :#9E9E9E;

.hrm-sign-attendance{
	.hrm-sign{
		// .content{
		// 	border-bottom:0;
		// 	position:relative;
		// 	overflow: auto;
			
		// 	.flow{
		// 		position:fixed;
		// 		bottom:50*@hd;
		// 	}
		// }
	}

	.am-tab-bar{
		.am-tabs-content-wrap{
			& > div{
				height:100%;
				background: #fff;
			}
		}

	}



}

.attendance-date{
	.am-picker-popup-title{
		& > div{
			display:none;
		}
	}
}

.wm-route-layout{
	.attendance-actualDetail-noData{
		height:100%;

		display: flex;
		flex-direction:column;

		& > svg{
			align-self: flex-end;
			margin: 10px;
		}
	}

	.attendance-no-data{
		display: flex;
	    flex-direction: column;

	    justify-content: center;
	    align-items: center;


	    height:100%;

	    & >div:last-child{
	    	margin-top:10*@hd;
	    };

	    svg{
	        width:60*@hd;
	        height:60*@hd;
	    }
	}

	.overtime{
		li:first-child{
			span:first-child{
				display: inline-block;
				width:27%;
			}

			span:last-child{
				display: inline-block;
				width:71%;
				margin-left:2%;
			}
		};
		li:nth-child(2){
			margin-top: 0 !important;
		}
	}
}

.hrm-attendance{
	height:100%;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	background-color:@color-text-base-inverse;

	.disabled-item{
		color:@greyColor !important;
	}

	.greyBg{
		background-color:@greyColor !important;
	}

	.hide-tab{
		
	}

	.attendance-number-size{
		font-size:20 * @hd;
	}

	.item-padding{
		padding: 5px 0;
	}

	.flexGrow{
		flex-grow:1;
	}

	.ellipsis{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.attendance-label{
		color: #868686 ;
		font-size:@font-size-caption-sm;
	}

	.attendance-columns-title{
		padding: 13 * @hd 5*@hd;
	}

	.am-picker-input {
		color:@attendanceBlue;
		border-bottom: 0;
		padding-left: 20*@hd;

		float:left;

		.am-picker-input-icon{
			color:@attendanceBlue;
		}
	}

	.am-whitespace{
		background-color: @divisionBgColor;
	}



	.attendance-entry{
		line-height:44 * @hd;
		text-align: right;

		.attendance-entry-label{
			padding: 0 15px 0 10px;
			color:@attendanceBlue;
		}
	}

	.attendance-brief{
		@attendanceColor: #48A6FF;
		@absenceColor:#FF60AB;
		.attendance-total{
			padding-bottom: 15 * @hd;

			.attendance-total-brief{
				display:flex;

				.total-brief-item{
					width:50%;
					text-align:center;

					.total-brief-value{
						.attendance-number-size;
					}

					.realWorkDays{
						color:@attendanceColor;
					}

					.leaveDays{
						color:@absenceColor;
					}

					.total-brief-title{
						font-size:@font-size-base;
						padding-top:5*@hd;

						span{
							font-size:@font-size-base;
						}

						.REALWORKDAYS{
							background-color: @attendanceColor;
						}

						.ABSENT{
							background-color:@absenceColor;
						}

						.dot{
							width:8 * @hd;
							height:8 * @hd;

							display:inline-block;

							border-radius:@radius-circle;
						}

						span{
							margin-left:5px;
						}
					}
				}
			}

		}

		.attendance-details{
			border-top: @greyLine;
			padding: 10px 0;

			display:flex;
			flex-wrap: wrap;

			.attendance-leave-header{

				.attendance-details-value{
					.attendance-number-size
				}
			}

			.attendance-details-brief {
				width: 33.3%;

				div{
					.ellipsis;
					text-align: center;
				};

				div:first-child{
					.attendance-number-size;
				}

				div:last-child{
					.attendance-label;
					padding-top:5*@hd;
				}
			}

		}
	}

	.attendance-outside{
		.attendance-abnormal{
			.attendance-abnormal-content{
				display:flex;
				flex-wrap:wrap;

				.abnormal-content-item{
					width:33.3%;

					.abnormal-icon-wrap{
						display: flex;
						justify-content: center;
						padding:5*@hd 0;

						.abnormal-icon{
							width:38 * @hd;
							height:38 * @hd;
							line-height: 50 * @hd;
							text-align:center;
							border-radius:@radius-circle;
						}
					}

					.abnormal-brief{
						text-align: center;

						div{
							.ellipsis;
							padding:3*@hd;
						};

						div:first-child{
							.attendance-number-size;
						}

						div:last-child{
							.attendance-label
						}
					}
				}
			}

		}

		.attendance-leave{
			.attendance-leave-header{
				.leave-title{
					float:left;
					border-bottom: 0;
				}
			}

			.attendance-leave-none{
				position:relative;
				padding: 10*@hd 0;
				text-align:center;

				svg{
					vertical-align:bottom;
				}

				span{
					vertical-align: text-top;
				}


			}

			.attendance-leave-content{
				display:flex;
				flex-wrap:wrap;

				.attendance-leave-brief{
					width:33.3%;
					text-align:center;
					padding: 10*@hd 0;

					div{
						.ellipsis;
					};

					div:first-child{
						.attendance-number-size;
						padding: 3*@hd 0;
					}

					div:last-child{
						.attendance-label
					}

				}
			}

			.attendance-entry-label{
				padding-right: 0;
			}

		}

	}


}

.hrm-subordinate{
	height:100%;
	background-color:@color-text-base-inverse;

	display: flex;
	flex-direction:column;
	
	& > div:last-child{
		flex-grow:1;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	};

	.attendance-no-data{
		display: flex;
	    flex-direction: column;

	    justify-content: center;
	    align-items: center;


	    height:100%;

	    & >div:last-child{
	    	margin-top:10*@hd;
	    };

	    svg{
	        width:60*@hd;
	        height:60*@hd;
	    }
	}

	form{
		border-bottom: 0;
	}

	.am-list-body{
		border-bottom:0;

		& > div{
			border-bottom:1*@hd solid #ddd !important;
			padding-left:0;
			margin-left: 15*@hd;
		}
	}

	.am-list-line{
		border-bottom: 0 !important;
		padding:5*@hd 12*@hd 0 5*@hd;

		.am-list-content{
			div{
				margin-top: 0;
			}
			span{
				.attendance-ellipsis;

				display: inline-block;
				width:49%;
			}

			span:nth-child(even){
				margin-left: 2%;
			}
		}
	}
}

.attendance-absence{
	height:100%;
	display:flex;
	flex-direction: column;

	.am-wingblank{
		height:auto;
		position:relative;
	}
	
	.attendance-absence-total{
		padding:20*@hd 0;
		margin-top: 10*@hd;
		border-radius:@radius-md;
		background-color: #3596fa;
		color:@color-text-base-inverse;
		font-size: 16*@hd;
		background-image: linear-gradient(115deg, #3185FF 43%, #30B7FF 100%);
		border-radius: 5*@hd;
		text-align: center;
	}

	.attendance-absence-category{
		padding: 10*@hd 0;
		display: inline-block;

		.absence-category-item{
			float:left;
			padding:5*@hd 15*@hd 5*@hd 0;

			& > div:last-child{
				font-size:@font-size-caption-sm;
				padding-top: 5*@hd;
			}

			.item-circle-wrap{
				display: flex;
				justify-content: center;

				.category-item-circle{
					width:8*@hd;
					height:8*@hd;

					border-radius:@radius-circle;
				}
			}

		}
	}

	.absence-icon-wrap{
		display: inline-block;
		position: absolute;
		left: -12*@hd;
		top: 20*@hd;
		opacity: 0.3;

		.am-icon-lg {
			width: 62px;
			height: 62px;
		}
	}

	.attendance-absence-details{
		background-color:@divisionBgColor;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		flex-grow:1;

		.am-timeline{
			padding: 0 10*@hd;

			.am-timeline-item-head{
				background-color:@divisionBgColor;
			}

			.am-timeline-item-last{
				.am-timeline-item-tail{
					display: inherit;
				}
			}
		}

		.absence-detail-item{
			.attendance-shadow;
			display: inline-block;
			width:96%;
			padding:10*@hd 2%;

			.detail-item-day{
				color: #3596fa;
				font-size:@font-size-base;
			}

			.detail-item-date{
				color:@greyColor;
				font-size:@font-size-caption-sm;
				margin-left:10*@hd;
			}

			.detail-item-scope{
				@scopeRadius: 14*@hd;
				margin-top: 40*@hd;

				.item-scope-period{
					position:relative;

					.scope-period-absence{
						height: 11*@hd;
						position:absolute;
						bottom: 10*@hd;
						border-radius:@scopeRadius;
					}

					.scope-period-common{
						position: absolute;
						height: 5*@hd;
						bottom: 0;
					}

					.scope-period-schedule{
						.scope-period-common;
						background-color: #7ed321;
						z-index: 10;
						border-radius:@scopeRadius;
					}

					.scope-period-rest{
						.scope-period-common;
						background-color: #fff5ce;
						z-index: 10;
					}

					.scope-period-base{
						.scope-period-common;
						background-color: #dadada;
						width: 100%;
						border-radius:@scopeRadius;
					}
				}

				.item-scope-scale{
					font-size:@font-size-caption-sm;
					display: inline-block;
					width:100%;

					span{
						display: inline-block;
						color:#999;
					}

					span:first-child{
						float:left;
					}

					span:last-child{
						float:right;
					}
				}
			}
		}
	}
}

.attendance-schedule{
	height:100%;
	& > div{
		display: flex;
		flex-direction: column;
		height:100%;
	} 
	
	p{
		text-align:center;
		padding-top: 10*@hd; 
		color: @greyColor;
	}

	.am-schedule {
		.extra{
			z-index:100;
		}

		.cell{
			.sign{
				right:-14% !important;

				svg{
					width:12*@hd;
					height:12*@hd;
				}
			}
		}
	}
	
	.timeline-last-item-tail-show;

	.am-timeline-item-head{
		background-color:@divisionBgColor;
	}

	.schedule-sign-wrap{
		padding:20*@hd 15*@hd 10*@hd;
		background-color:@divisionBgColor;
		overflow-y:scroll;
		-webkit-overflow-scrolling: touch;
		flex-grow: 1;

		.sign-serial{
			color: @greyColor;
			font-size: @font-size-caption-sm;
		}

		.attendance-schedule-sign{
			.attendance-self-define-ul;
			.attendance-shadow;

			padding:5*@hd 15*@hd;
			font-size:@font-size-caption-sm;

			li{
				padding: 5*@hd 0;

				.schedule-sign-item{
					display:flex;
					align-items:center;

					.sign-item-value{
						display:flex;
						align-items:center;
						margin-left:5*@hd;
					}
				}
			}

			li:not(:first-child){
				color: @greyColor;
			}

			.schedule-sign-status{
				display:inline-block;
				border: 1px solid ;
				
				border-radius: 4*@hd;
				padding:2*@hd 4*@hd;
				margin-left:10*@hd !important;
			}

			.status-noraml{
				border-color: #9E9E9E;
				color: #9E9E9E ;
			}

			.status-abnormal{
				border-color: #E26E3E;
				color:#E26E3E;
			}

			.schedule-sign-workflow{
				color:#55B1F9 !important;
			}
			
		}
	}

	.attendance-workflow{
		padding-left: 12*@hd;
		margin-top:30*@hd;
		
		.attendance-workflow-title{
			span{
				font-size: @font-size-caption-sm;
				margin-left: 10*@hd;
				vertical-align:2*@hd;
			}
		}

		.attendance-workflow-brief{
			border-left: 4*@hd solid @brand-primary;
			padding-left:10*@hd;
			margin-top: 10*@hd;
			display:flex;
			align-items: center;
			background:@color-text-base-inverse;
			border-radius: 4*@hd;
			height:60*@hd;

			.workflow-brief-left{
				flex:9;
				font-size: @font-size-caption-sm;

				div{
					padding: 4*@hd 0;
				}
			}

			.workflow-brief-right{
				flex:1;
			}
		}
		
	}

}

.attendance-absenceDetail{
	& > div{
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;

		height:100%;
	}

	.am-timeline-item-last{
		.am-timeline-item-tail{
			display: inherit;
		}
	}

	.attendance-actualDetail-item{
		.attendance-self-define-ul;
		.attendance-shadow;

		padding:10*@hd 0 16*@hd 15*@hd;
		margin-right:10*@hd;

		font-size:@font-size-caption-sm;


		li{
			padding: 5*@hd 0;
			display: flex;

			span:first-child{
				color:@greyColor;
			}
		}

		li:nth-child(2){
			margin-top: 10*@hd;
		}

		li:not(:first-child){
			span:first-child{
				display: inline-block;
				width:30%;
				.attendance-ellipsis;
			}

			span:last-child{
				display: inline-block;
				width:70%;
			}
		}
	}


}

.attendance-actualDetail{
	& > div:first-child{
		display:flex;
		flex-direction:column;

		height:100%;

		& > ul:first-child{
			height:15*@hd;
		}

		& > ul:last-child{
			flex-grow:1;
			
			margin-top:0;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
		};
	};
	.am-timeline-item-last{
		.am-timeline-item-tail{
			display: inherit;
		}
	}

	.attendance-actualDetail-top{
		text-align: right;

		span{
			display: inline-block;
			float:left;
		}

		svg{
			margin-right:10*@hd;;
		}

		&+ul{
			padding-left: 0;

			.timeline-last-item-tail-show;

			li{
				.am-timeline-item-tail{
					margin-left: 10*@hd;
				}

				.am-timeline-item-head{
					margin-left: 4*@hd;
				}
			}
		}
	}

	.attendance-actualDetail-item{
		.attendance-self-define-ul;
		.attendance-shadow;

		padding:10*@hd 0 16*@hd 15*@hd;
		margin-right:10*@hd;

		font-size:@font-size-caption-sm;


		li{
			padding: 5*@hd 0;
			display: flex;

			span:first-child{
				color:@greyColor;
			}
		}

		li:nth-child(2){
			margin-top: 10*@hd;
		}

		li:not(:first-child){
			span:first-child{
				display: inline-block;
				width:27%;
			}

			span:last-child{
				display: inline-block;
				width:71%;
				margin-left:2%;
			}
		}
	}
}

.attendance-banlance{
	@balancePadding: 14*@hd;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;

	.am-wingblank{
		height:auto;
		padding-bottom:15*@hd;

		& > div{
			.attendance-shadow;
			margin-top:15*@hd;
		}
	}

	h4{
		padding: @balancePadding;
		margin:0;
		font-weight:400;
		padding-left:16*@hd;
		border-radius: 3*@hd 3*@hd 0 0;

		color:@color-text-base-inverse;
		font-size:@font-size-caption-sm;
	}

	ul{
		.attendance-self-define-ul;

		font-size:@font-size-caption-sm;
		border:@greyLine;

		li{
			padding: @balancePadding;

			span:last-child{
				display:inline-block;
				float:right;
			};
		}
	}
}

.timeline-last-item-tail-show{
	.am-timeline-item-last{
		.am-timeline-item-tail{
			display: inherit;
		}
	}
}

.attendance-timeline-dot{
	background: #55B1F9;
	border: 2*@hd solid #FFFFFF;
	box-shadow: 0 2*@hd 4*@hd 0 rgba(0,0,0,0.17);
	width: 10*@hd;
	height: 10*@hd;
	border-radius: 100%;
}

.attendance-shadow{
	box-shadow: 0 1*@hd 4*@hd 0 rgba(0,0,0,0.10);
	border-radius: 2.5*@hd;
	background: #FFFFFF;
}

.attendance-timeline-first-dot{
	color:@brand-primary;
}

.attendance-self-define-ul{
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.am-wingblank{
	height:100%;
}

.attendance-ellipsis{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.hrm-only-attendance{
	height:100%;
	.am-tabs-content-wrap{
		height:calc(~"100% - 43.5px");
		& > div{
			height:100%;
			background: #fff;
		}
	}
}